<template>
  <div>
    <!-- 

        default-expanded-keys 默认展开节点 
        expand-on-click-node false为点击节点可以展开,true 要点击展开箭头
        @node-drop 拖拽成功的回调事件  “v-on”指令的简写是“@”
        
        ref="menuTree"  作用,调用组件提供的方法
        this.$refs 得到所有组件
        this.$refs.menuTree 得到树的组件
        this.$refs.menuTree.getCheckedNodes  调用树组件的获取选中节点的方法
    -->
    <el-tree :data="menus" 
        node-key="catId"  
        :props="defaultProps"  
        :expand-on-click-node="false"  
        @node-click="nodeClicek"
      ref="menuTree">
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      draggable:false, //是否允许拖拽,true 
      menus: [],  //树内容
      expandedKey: [164], //默认展开的节点
      defaultProps: {
        children: 'children', //配置子树是对象的那个属性
        label: 'name'  //对应树结构中的名字, 配置显示字段
      }
    };
  },
  components: {
  },
  methods: {
    getMenus() {
      this.$http({
        url: this.$http.adornUrl('/product/category/list/tree'),
        method: 'get',
      }).then(({ data }) => {
        //{data} 把数据中的data解构出来
        this.menus = data.data;
      })
    },
    //节点所对应的对象、节点对应的 Node、节点组件本身。
    //树节点点击事件
    nodeClicek(data,node,component){
      //console.log("树点击数据:",data);
      this.$emit("tree-node-click",data,node); //向父节点通讯
    }
  },
  //生命周期函数 在实例创建完成后被立即同步调用。 
  created() {
    this.getMenus();
  }
}
</script>

<style>

</style>